<script setup>
import ButtonLogin from '@/components/ButtonLogin.vue'
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

// References for sections
const systemIntro = ref(null)
const smokeRemovalSection = ref(null)
const modalFusionSection = ref(null)
const yoloDetectionSection = ref(null)
const sections = ref([])

// References for models and popups
const smokeModelPopup = ref(null)
const fusionModelPopup = ref(null)
const yoloModelPopup = ref(null)
const pageOverlay = ref(null)

// Navigation state
const activeSection = ref(0)
const isScrolling = ref(false)
const scrollTimeout = ref(null)

// Router setup
const router = useRouter()

// Navigation functions
const toLogin = () => {
    router.push('/login')
}

const toGitee = () => {
    window.open('https://gitee.com/mindwell/bank-management')
}

// Scroll to specific section
const scrollToSection = (index) => {
    if (sections.value[index]) {
        sections.value[index].scrollIntoView({ behavior: 'smooth' })
        activeSection.value = index
    }
}

// Handle wheel scroll
const handleScroll = () => {
    // Find which section is currently in view
    const currentPosition = window.scrollY + window.innerHeight / 2
    let newActiveSection = 0

    sections.value.forEach((section, index) => {
        if (!section) return
        const rect = section.getBoundingClientRect()
        const sectionTop = rect.top + window.scrollY
        const sectionBottom = sectionTop + rect.height

        if (currentPosition >= sectionTop && currentPosition <= sectionBottom) {
            newActiveSection = index
        }
    })

    // Update active section if changed
    if (newActiveSection !== activeSection.value) {
        activeSection.value = newActiveSection
    }

    // Debounce scroll events
    if (scrollTimeout.value) {
        clearTimeout(scrollTimeout.value)
    }

    isScrolling.value = true
    scrollTimeout.value = setTimeout(() => {
        isScrolling.value = false
    }, 150)
}

// Model popup functions
const showModelPopup = (popupRef) => {
    if (popupRef.value) {
        popupRef.value.classList.add('active')
        pageOverlay.value.classList.add('active')
        document.body.style.overflow = 'hidden'
    }
}

const closeModelPopup = () => {
    smokeModelPopup.value?.classList.remove('active')
    fusionModelPopup.value?.classList.remove('active')
    yoloModelPopup.value?.classList.remove('active')
    pageOverlay.value.classList.remove('active')
    document.body.style.overflow = 'auto'
}

// Lifecycle hooks
onMounted(() => {
    // Initialize sections array
    sections.value = [
        systemIntro.value,
        smokeRemovalSection.value,
        modalFusionSection.value,
        yoloDetectionSection.value
    ]

    // Add scroll event listener
    window.addEventListener('scroll', handleScroll)

    // Close popup on ESC key
    window.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            closeModelPopup()
        }
    })

    // Initial position check
    handleScroll()
})

onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll)
})
</script>

<template>
  <div class="container">
    <!-- Fixed header -->
    <header class="header">
      <h1 class="title">
        火域智眼——基于双模态感知的浓烟环境下人体目标实时检测系统
      </h1>
      <button-login
        @click="toLogin"
        text="登录/注册 →"
        extraClass="login-btn"
      ></button-login>
    </header>

    <!-- Side navigation -->
    <nav class="side-nav" :class="{ 'is-scrolling': isScrolling }">
      <ul>
        <li
          v-for="(name, index) in [
            '系统介绍',
            '去烟模块',
            '双模态融合',
            'YOLO检测'
        ]"
          :key="index"
          :class="{ active: activeSection === index }"
          @click="scrollToSection(index)"
        >
          <span class="nav-indicator"></span>
          <span class="nav-text">{{ name }}</span>
        </li>
      </ul>
    </nav>

    <!-- Main content -->
    <main class="content">
      <!-- Section 1: System Introduction -->
      <section class="system-intro section" ref="systemIntro">
        <div class="left">
          <h1>
            基于<span>双模态感知</span>的<br />浓烟环境下<span>人体目标实时检测</span>系统
          </h1>
          <p>
            "火域智眼"系统通过双模态感知技术与微服务架构，为消防指挥中心工作人员提供高效的指挥与协作工具，提升火灾应急响应能力。
          </p>
          <div class="btn-wrapper">
            <button-login
              @click="toLogin"
              text="立即体验"
              extraClass="btn-use btn-intro"
            ></button-login>
            <button-login
              @click="toGitee"
              text="联系我们"
              extraClass="btn-contact btn-intro"
            ></button-login>
          </div>
        </div>
        <figure class="right">
          <img
            src="../../assets/svg/金融.svg"
            alt="消防机器人插图"
            class="img"
          />
        </figure>
      </section>

      <!-- Section 2: Smoke Removal Module -->
      <section class="smoke-removal-section section" ref="smokeRemovalSection">
        <div class="section-content">
          <div class="section-header">
            <h2>去烟模块</h2>
            <p>通过深度学习技术，实现烟雾环境下图像的清晰化处理</p>
          </div>

          <div class="section-body">
            <div
              class="model-abstract"
              @mouseenter="showModelPopup(smokeModelPopup)"
            >
              <img src="/src/assets/svg/模型算法.svg" alt="去烟模型抽象图" />
              <div class="hover-hint">
                <span>查看模型详情</span>
              </div>
            </div>

            <div class="image-comparison">
              <div class="image-item">
                <h3>红外原始图像</h3>
                <div class="image-container">
                  <img
                    src="/src/assets/svg/模型算法.svg"
                    alt="烟雾环境下的红外图像"
                  />
                </div>
              </div>

              <div class="image-item">
                <h3>去烟后图像</h3>
                <div class="image-container">
                  <img src="/src/assets/svg/模型算法.svg" alt="去烟后的图像" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Section 3: Dual-Modal Fusion Module -->
      <section class="modal-fusion-section section" ref="modalFusionSection">
        <div class="section-content reverse">
          <div class="section-header">
            <h2>双模态融合</h2>
            <p>对热成像与红外图像进行配准与融合，实现优势互补</p>
          </div>

          <div class="section-body">
            <div class="image-comparison three-images">
              <div class="image-item">
                <h3>红外图像</h3>
                <div class="image-container">
                  <img src="/src/assets/svg/模型算法.svg" alt="红外图像" />
                </div>
              </div>

              <div class="image-item">
                <h3>热成像图像</h3>
                <div class="image-container">
                  <img src="/src/assets/svg/模型算法.svg" alt="热成像图像" />
                </div>
              </div>

              <div class="image-item">
                <h3>融合后图像</h3>
                <div class="image-container">
                  <img src="/src/assets/svg/模型算法.svg" alt="融合后图像" />
                </div>
              </div>
            </div>

            <div
              class="model-abstract"
              @mouseenter="showModelPopup(fusionModelPopup)"
            >
              <img
                src="/src/assets/svg/模型算法.svg"
                alt="双模态融合模型抽象图"
              />
              <div class="hover-hint">
                <span>查看模型详情</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Section 4: YOLOv12 Detection Module -->
      <section
        class="yolo-detection-section section"
        ref="yoloDetectionSection"
      >
        <div class="section-content">
          <div class="section-header">
            <h2>YOLOv12人体检测</h2>
            <p>基于优化的YOLOv12模型，实现浓烟环境下的精准人体目标检测</p>
          </div>

          <div class="section-body centered">
            <div
              class="model-abstract"
              @mouseenter="showModelPopup(yoloModelPopup)"
            >
              <img src="/src/assets/svg/模型算法.svg" alt="YOLOv12模型抽象图" />
              <div class="hover-hint">
                <span>查看模型详情</span>
              </div>
            </div>

            <div class="detection-result">
              <h3>检测效果展示</h3>
              <div class="image-container large">
                <img
                  src="/src/assets/svg/模型算法.svg"
                  alt="YOLOv12人体检测结果"
                />
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- Model popup overlays -->
    <div class="page-overlay" ref="pageOverlay" @click="closeModelPopup"></div>

    <!-- Smoke removal model popup -->
    <div class="model-popup" ref="smokeModelPopup">
      <div class="popup-header">
        <h2>去烟模型架构详情</h2>
        <button class="close-btn" @click="closeModelPopup">&times;</button>
      </div>
      <div class="popup-content">
        <img
          src="/src/assets/svg/模型算法.svg"
          alt="去烟模型详细架构图"
          class="model-detail-img"
        />
        <div class="model-explanation">
          <h3>模型原理</h3>
          <p>
            本模型采用深度学习技术，通过多层次的特征提取和重建网络，实现烟雾环境下图像的清晰化处理。主要包括特征提取模块、特征增强模块和图像重建模块三个部分。
          </p>

          <h3>技术亮点</h3>
          <ul>
            <li>残差连接结构，有效解决梯度消失问题</li>
            <li>注意力机制，突出关键区域特征</li>
            <li>多尺度特征融合，提高去烟效果</li>
            <li>高效轻量级设计，保证实时性能</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Fusion model popup -->
    <div class="model-popup" ref="fusionModelPopup">
      <div class="popup-header">
        <h2>双模态融合模型架构详情</h2>
        <button class="close-btn" @click="closeModelPopup">&times;</button>
      </div>
      <div class="popup-content">
        <img
          src="/src/assets/svg/模型算法.svg"
          alt="双模态融合模型详细架构图"
          class="model-detail-img"
        />
        <div class="model-explanation">
          <h3>模型原理</h3>
          <p>
            双模态融合模型首先对红外图像和热成像图像进行配准，然后通过深度神经网络实现两种模态信息的有效融合，综合利用两种图像的互补优势。
          </p>

          <h3>技术亮点</h3>
          <ul>
            <li>先进的图像配准算法，确保空间对应关系</li>
            <li>多级特征提取与融合，保留各模态信息</li>
            <li>自适应权重分配机制，优化融合效果</li>
            <li>端到端训练方式，提高整体性能</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- YOLO model popup -->
    <div class="model-popup" ref="yoloModelPopup">
      <div class="popup-header">
        <h2>YOLOv12人体检测模型架构详情</h2>
        <button class="close-btn" @click="closeModelPopup">&times;</button>
      </div>
      <div class="popup-content">
        <img
          src="/src/assets/svg/模型算法.svg"
          alt="YOLOv12模型详细架构图"
          class="model-detail-img"
        />
        <div class="model-explanation">
          <h3>模型原理</h3>
          <p>
            基于YOLOv12的检测模型采用单阶段目标检测架构，通过骨干网络提取特征，特征金字塔网络进行多尺度融合，并使用检测头输出预测结果。针对浓烟环境进行了特殊优化。
          </p>

          <h3>技术亮点</h3>
          <ul>
            <li>改进的特征提取网络，提高特征表达能力</li>
            <li>针对烟雾环境的数据增强策略</li>
            <li>优化的损失函数，提高检测准确率</li>
            <li>轻量级设计，满足实时检测需求</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// Variables
$color-primary: #4834d4;
$color-primary-light: lighten($color-primary, 10%);
$color-primary-dark: mix($color-primary, #000, 80%);
$color-white: #fff;
$color-grey-light-1: #f9f9f9;
$color-grey-light-2: #eee;
$color-grey-dark-1: #777;
$color-grey-dark-2: #555;
$color-dark: #333;

// Mixins
@mixin flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flexRowCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin pseudoIcon($position) {
  &::#{$position} {
    content: '';
    display: block;
    width: 2rem;
    height: 2rem;
    position: absolute;
  }
}

// Keyframes Animations
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideLeft {
  from {
    transform: translateX(50px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideRight {
  from {
    transform: translateX(-50px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

// General Styles
.container {
  background-color: $color-grey-light-1;
  position: relative;
}

// Header
.header {
  background-color: $color-white;
  height: 8rem;
  width: 100%;
  box-shadow: 0 0.5rem 1rem rgba($color-dark, 0.1);
  color: $color-dark;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;

  .title {
    line-height: 4rem;
    font-size: 2.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .login-btn {
    padding: 1.2rem 2rem;
    width: 15rem;
    font-size: 1.5rem;
    flex-shrink: 0;
  }
}

// Side Navigation
.side-nav {
  position: fixed;
  right: 3rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  transition: opacity 0.3s;

  &.is-scrolling {
    opacity: 0.3;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  li {
    position: relative;
    margin: 2rem 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.3s;

    .nav-indicator {
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 50%;
      background-color: rgba($color-primary, 0.3);
      display: block;
      margin-right: 1rem;
      transition: all 0.3s;
    }

    .nav-text {
      color: $color-grey-dark-1;
      font-size: 1.4rem;
      opacity: 0;
      transform: translateX(10px);
      transition: all 0.3s;
    }

    &:hover,
    &.active {
      .nav-indicator {
        background-color: $color-primary;
        box-shadow: 0 0 0 4px rgba($color-primary, 0.2);
      }

      .nav-text {
        opacity: 1;
        transform: translateX(0);
      }
    }
  }
}

// Main Content
.content {
  padding-top: 8rem; // Space for fixed header
}

// Section Common Styles
.section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 8rem;
  position: relative;
  overflow: hidden;

  &:nth-child(odd) {
    background-color: $color-white;
  }

  &:nth-child(even) {
    background-color: $color-grey-light-1;
  }
}

.section-content {
  width: 100%;
  max-width: 1400px;
  display: flex;
  flex-direction: column;
  gap: 4rem;

  &.reverse {
    .section-body {
      flex-direction: row-reverse;
    }
  }
}

.section-header {
  text-align: left;

  h2 {
    font-size: 3.6rem;
    color: $color-primary;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;

    &::after {
      content: '';
      position: absolute;
      bottom: -1rem;
      left: 0;
      width: 8rem;
      height: 0.4rem;
      background-color: $color-primary;
      border-radius: 2px;
    }
  }

  p {
    font-size: 1.8rem;
    color: $color-grey-dark-2;
    max-width: 60%;
  }
}

.section-body {
  display: flex;
  gap: 4rem;
  align-items: center;

  &.centered {
    flex-direction: column;
    align-items: center;
  }
}

// System Introduction Section
.system-intro {
  display: flex;
  align-items: center;
  gap: 4rem;

  .left {
    flex: 1;
    padding-right: 2rem;

    h1 {
      font-size: 4rem;
      margin-bottom: 2rem;
      line-height: 1.2;
      animation: slideDown 0.7s ease-in-out forwards;

      span {
        color: $color-primary;
      }
    }

    p {
      font-size: 2rem;
      line-height: 1.5;
      color: $color-grey-dark-2;
      margin-bottom: 3rem;
      animation: slideUp 0.7s ease-in-out 0.3s forwards;
      opacity: 0;
    }

    .btn-wrapper {
      display: flex;
      gap: 2rem;
      animation: slideUp 0.7s ease-in-out 0.6s forwards;
      opacity: 0;

      .btn-intro {
        padding: 1.5rem 3rem;
        width: 15rem;
        font-size: 1.5rem;
        padding-left: 3.3rem;
        position: relative;

        @include pseudoIcon('before');

        &::before {
          top: 1.1rem;
          left: 1.8rem;
        }
      }

      .btn-use {
        background-color: $color-primary;
        color: $color-white;

        &::before {
          background: url('@/assets/svg/纸飞机.svg') no-repeat center / 70%;
        }

        &:hover {
          background-color: $color-primary-dark;
        }
      }

      .btn-contact {
        background-color: $color-white;
        color: $color-primary;
        border: 2px solid $color-primary;

        &::before {
          background: url('@/assets/svg/gitee.svg') no-repeat center / 70%;
        }

        &:hover {
          background-color: rgba($color-primary, 0.1);
        }
      }
    }
  }

  .right {
    flex: 1;
    display: flex;
    justify-content: center;
    animation: slideLeft 0.7s ease-in-out 0.9s forwards;
    opacity: 0;

    .img {
      max-width: 100%;
      height: auto;
    }
  }
}

// Image Comparison
.image-comparison {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;

  &.three-images {
    .image-item {
      flex: 1;
      min-width: 250px;
    }
  }
}

.image-item {
  flex: 1;
  min-width: 300px;

  h3 {
    text-align: center;
    margin-bottom: 1rem;
    color: $color-dark;
    font-size: 1.8rem;
  }

  .image-container {
    background-color: $color-white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba($color-dark, 0.1);
    transition:
      transform 0.3s,
      box-shadow 0.3s;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba($color-dark, 0.15);
    }

    img {
      width: 100%;
      height: auto;
      display: block;
    }

    &.large {
      max-width: 800px;
      margin: 0 auto;
    }
  }
}

// Model Abstract
.model-abstract {
  flex: 1;
  min-width: 300px;
  position: relative;
  background-color: $color-white;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 10px 20px rgba($color-dark, 0.1);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.3s,
    box-shadow 0.3s;

  &:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 30px rgba($color-dark, 0.2);

    .hover-hint {
      opacity: 1;
    }
  }

  img {
    width: 100%;
    height: auto;
    display: block;
    transition: filter 0.3s;
  }

  &:hover img {
    filter: brightness(0.7);
  }

  .hover-hint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($color-primary, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;

    span {
      color: $color-white;
      font-size: 2rem;
      font-weight: bold;
      padding: 1rem 2rem;
      border: 2px solid $color-white;
      border-radius: 30px;
    }
  }
}

// Detection Result
.detection-result {
  margin-top: 4rem;
  width: 100%;

  h3 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2.4rem;
    color: $color-primary;
  }
}

// Popup Styles
.page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba($color-dark, 0.8);
  backdrop-filter: blur(8px);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    visibility 0.3s;

  &.active {
    opacity: 1;
    visibility: visible;
  }
}

.model-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background-color: $color-white;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  border-radius: 12px;
  z-index: 300;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  box-shadow: 0 20px 40px rgba($color-dark, 0.3);

  &.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
  }

  .popup-header {
    padding: 2rem;
    border-bottom: 1px solid $color-grey-light-2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: $color-white;
    z-index: 1;

    h2 {
      font-size: 2.4rem;
      color: $color-primary;
      margin: 0;
    }

    .close-btn {
      background: none;
      border: none;
      font-size: 3rem;
      color: $color-grey-dark-1;
      cursor: pointer;
      line-height: 1;
      padding: 0;
      transition: color 0.3s;

      &:hover {
        color: $color-primary;
      }
    }
  }

  .popup-content {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;

    .model-detail-img {
      width: 100%;
      max-height: 400px;
      object-fit: contain;
    }

    .model-explanation {
      h3 {
        font-size: 2rem;
        color: $color-dark;
        margin-bottom: 1rem;
      }

      p {
        font-size: 1.6rem;
        color: $color-grey-dark-2;
        line-height: 1.6;
        margin-bottom: 2rem;
      }

      ul {
        padding-left: 2rem;

        li {
          font-size: 1.6rem;
          color: $color-grey-dark-2;
          margin-bottom: 1rem;
          position: relative;

          &::before {
            content: '';
            position: absolute;
            left: -2rem;
            top: 0.8rem;
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 50%;
            background-color: $color-primary;
          }
        }
      }
    }
  }
}

// Responsive styles
@media (max-width: 1200px) {
  .section {
    padding: 4rem 4rem;
  }

  .section-header {
    p {
      max-width: 100%;
    }
  }

  .section-body {
    flex-direction: column;

    &.centered {
      flex-direction: column;
    }
  }

  .section-content.reverse .section-body {
    flex-direction: column;
  }

  .system-intro {
    flex-direction: column;
    text-align: center;

    .left {
      padding-right: 0;

      .btn-wrapper {
        justify-content: center;
      }
    }
  }
}

@media (max-width: 768px) {
  .header {
    padding: 0 1.5rem;

    .title {
      font-size: 2rem;
    }

    .login-btn {
      width: auto;
      padding: 1rem 1.5rem;
      font-size: 1.4rem;
    }
  }

  .section {
    padding: 3rem 2rem;
  }

  .section-header {
    h2 {
      font-size: 2.8rem;
    }

    p {
      font-size: 1.6rem;
    }
  }

  .system-intro {
    .left {
      h1 {
        font-size: 3rem;
      }

      p {
        font-size: 1.8rem;
      }
    }
  }

  .side-nav {
    right: 1rem;
  }

  .model-popup {
    .popup-content {
      padding: 2rem;
    }
  }

  .image-comparison {
    flex-direction: column;

    .image-item {
      min-width: 100%;
    }
  }
}

// Animation classes for section elements (for scroll reveals)
.fade-in {
  animation: fadeIn 0.8s ease-in-out forwards;
}

.slide-up {
  animation: slideUp 0.8s ease-in-out forwards;
}

.slide-down {
  animation: slideDown 0.8s ease-in-out forwards;
}

.slide-left {
  animation: slideLeft 0.8s ease-in-out forwards;
}

.slide-right {
  animation: slideRight 0.8s ease-in-out forwards;
}

// Custom scrollbar
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: $color-grey-light-2;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: rgba($color-primary, 0.6);
  border-radius: 5px;

  &:hover {
    background: $color-primary;
  }
}
</style>
